<template>
  <div >
    <div class="banner">
      <van-nav-bar
        :title="`${infos.title}`"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        fixed
        class="leftrow"
      ></van-nav-bar>
      <img src="@/assets/images/seat/share.png" class="share" alt />
    </div>




<div class="all">
  <div class="all-nofoot">
<div class="we">
        <p>后来的我们</p>
      </div>
      <!-- 放映时间 -->
      <div class="three">
        <div class="time">15:30—17:14</div>
        <div class="type">原版3D</div>
      </div>
      <!-- 不同座椅颜色代表 -->
      <div class="color">
        <div class="optional"></div>
        <p>可选</p>
        <div class="no"></div>
        <p>不可选</p>
        <div class="selected"></div>
        <p>已选</p>
      </div>
      <!-- 电影幕墙 -->
      <div class="screen">
        <p>{{lists.room}}</p>
      </div>
      <!-- 座位 -->
      <div class="seat">
        <!-- 左侧边栏 -->
        <div class="seat-side">
          <div v-for="item in 9" :key="item" class="num">{{ item }}</div>
        </div>
        <!-- 沙发 -->
        <ul class="stark">
          <li v-for="(item,i) in list" :key="i">
            <span
              v-for="(item,j) in list[i]"
              :key="item.id"
              :class="{active:item.states,readybox1:item.color,black:item.display}"
              @click="cut(i,j)"
            ></span>
          </li>
        </ul>
      </div>
  </div>
    
      <!-- 底部 -->
      <div class="foot">
        <div class="foot-block">
          <p>推荐座位</p>
          <span @click="one">1人</span>
          <span @click="two">2人</span>
          <span @click="three">3人</span>
          <span @click="four">4人</span>
        </div>
        <div class="foot-btn" v-if="show">请先选座</div>
        <div class="foot-btn" v-else @click="ok">确认</div>
      </div>
    
</div>
    
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      show: true,
      list: [
        [
          {
            name: 1,
            states: false,
            zuowei: "1排01座",
            display: true,
            id: Math.random()
          },
          {
            name: 2,
            states: false,
            zuowei: "1排02座",
            display: true,
            id: Math.random()
          },
          {
            name: 3,
            states: false,
            zuowei: "1排03座",
            id: Math.random()
          },
          {
            name: 4,
            states: false,
            zuowei: "1排04座",
            id: Math.random()
          },
          {
            name: 5,
            states: false,
            zuowei: "2排01座",
            display: true,
            id: Math.random()
          },
          {
            name: 6,
            states: false,
            zuowei: "2排02座",
            id: Math.random()
          },
          {
            name: 7,
            zuowei: "2排03座",
            states: false,

            id: Math.random()
          },
          {
            name: 8,
            states: false,
            id: Math.random(),
            zuowei: "2排04座"
          },
          {
            name: 9,
            states: false,
            zuowei: "3排01座",
            id: Math.random()
          },
          {
            name: 10,
            states: false,
            zuowei: "3排02座",
            id: Math.random()
          },
          {
            name: 11,
            states: false,
            zuowei: "3排03座",
            id: Math.random()
          },
          {
            name: 12,
            states: false,
            zuowei: "3排04座",
            id: Math.random()
          }
        ],
        [
          {
            name: 1,
            zuowei: "1排05座",
            states: false,
            id: Math.random()
          },
          {
            name: 2,
            states: false,
            zuowei: "1排06座",
            id: Math.random()
          },
          {
            name: 3,
            states: false,
            zuowei: "1排07座",
            id: Math.random()
          },
          {
            name: 4,
            states: false,
            zuowei: "1排08座",
            id: Math.random()
          },
          {
            name: 5,
            states: false,
            zuowei: "2排05座",
            id: Math.random()
          },
          {
            name: 6,
            states: false,
            zuowei: "2排06座",
            id: Math.random()
          },
          {
            name: 7,
            states: false,
            zuowei: "2排07座",
            id: Math.random()
          },
          {
            name: 8,
            states: false,
            zuowei: "2排08座",
            id: Math.random()
          },
          {
            name: 9,
            states: false,
            zuowei: "3排05座",
            id: Math.random()
          },
          {
            name: 10,
            states: false,
            zuowei: "3排06座",
            id: Math.random()
          },
          {
            name: 11,
            states: false,
            zuowei: "3排07座",
            id: Math.random()
          },
          {
            name: 12,
            states: false,
            zuowei: "3排08座",
            id: Math.random()
          }
        ],
        [
          {
            name: 1,
            states: false,
            zuowei: "1排09座",
            id: Math.random()
          },
          {
            name: 2,
            states: false,
            zuowei: "1排10座",
            id: Math.random()
          },
          {
            name: 3,
            states: false,
            zuowei: "1排11座",
            display: true,
            id: Math.random()
          },
          {
            name: 4,
            states: false,
            zuowei: "1排12座",

            display: true,
            id: Math.random()
          },
          {
            name: 5,
            states: false,
            zuowei: "2排09座",
            id: Math.random()
          },
          {
            name: 6,
            states: false,
            zuowei: "2排10座",
            id: Math.random()
          },
          {
            name: 7,
            states: false,
            zuowei: "2排11座",
            id: Math.random()
          },
          {
            name: 8,
            states: false,
            zuowei: "2排12座",

            display: true,
            id: Math.random()
          },
          {
            name: 9,
            states: false,
            zuowei: "3排09座",
            id: Math.random()
          },
          {
            name: 10,
            states: false,
            zuowei: "3排10座",
            id: Math.random()
          },
          {
            name: 11,
            states: false,
            zuowei: "3排11座",
            id: Math.random()
          },
          {
            name: 12,
            states: false,
            zuowei: "3排12座",
            id: Math.random()
          }
        ],
        [
          {
            zuowei: "4排01座",
            name: 1,
            states: false,
            id: Math.random()
          },
          { zuowei: "4排02座", name: 2, states: false, id: Math.random() },
          { zuowei: "4排03座", name: 3, states: false, id: Math.random() },
          { zuowei: "4排04座", name: 4, states: false, id: Math.random() },
          { zuowei: "5排01座", name: 5, states: false, id: Math.random() },
          { zuowei: "5排02座", name: 6, states: false, id: Math.random() },
          { zuowei: "5排03座", name: 7, states: false, id: Math.random() },
          { zuowei: "5排04座", name: 8, states: false, id: Math.random() },
          { zuowei: "6排01座", name: 9, states: false, id: Math.random() },
          { zuowei: "6排02座", name: 10, states: false, id: Math.random() },
          { zuowei: "6排03座", name: 11, states: false, id: Math.random() },
          { zuowei: "6排04座", name: 12, states: false, id: Math.random() }
        ],
        [
          { zuowei: "4排05座", name: 1, states: false, id: Math.random() },
          { zuowei: "4排06座", name: 2, states: false, id: Math.random() },
          { zuowei: "4排07座", name: 3, states: false, id: Math.random() },
          { zuowei: "4排08座", name: 4, states: false, id: Math.random() },
          { zuowei: "5排05座", name: 5, states: false, id: Math.random() },
          {
            zuowei: "5排06座",
            name: 6,
            states: false,
            color: true,
            id: Math.random()
          },
          {
            zuowei: "5排07座",
            name: 7,
            states: false,
            color: true,
            id: Math.random()
          },
          { zuowei: "5排08座", name: 8, states: false, id: Math.random() },
          { zuowei: "6排05座", name: 9, states: false, id: Math.random() },
          { zuowei: "6排06座", name: 10, states: false, id: Math.random() },
          { zuowei: "6排07座", name: 11, states: false, id: Math.random() },
          { zuowei: "6排08座", name: 12, states: false, id: Math.random() }
        ],
        [
          { zuowei: "4排09座", name: 1, states: false, id: Math.random() },
          { zuowei: "4排10座", name: 2, states: false, id: Math.random() },
          { zuowei: "4排11座", name: 3, states: false, id: Math.random() },
          { zuowei: "4排12座", name: 4, states: false, id: Math.random() },
          { zuowei: "5排09座", name: 5, states: false, id: Math.random() },
          { zuowei: "5排10座", name: 6, states: false, id: Math.random() },
          { zuowei: "5排11座", name: 7, states: false, id: Math.random() },
          { zuowei: "5排12座", name: 8, states: false, id: Math.random() },
          { zuowei: "6排09座", name: 9, states: false, id: Math.random() },
          { zuowei: "6排10座", name: 10, states: false, id: Math.random() },
          { zuowei: "6排11座", name: 11, states: false, id: Math.random() },
          { zuowei: "6排12座", name: 12, states: false, id: Math.random() }
        ],
        [
          { zuowei: "7排01座", name: 1, states: false, id: Math.random() },
          { zuowei: "7排02座", name: 2, states: false, id: Math.random() },
          { zuowei: "7排03座", name: 3, states: false, id: Math.random() },
          { zuowei: "7排04座", name: 4, states: false, id: Math.random() },
          { zuowei: "8排01座", name: 5, states: false, id: Math.random() },
          { zuowei: "8排02座", name: 6, states: false, id: Math.random() },
          { zuowei: "8排03座", name: 7, states: false, id: Math.random() },
          { zuowei: "8排04座", name: 8, states: false, id: Math.random() },
          { zuowei: "9排01座", name: 9, states: false, id: Math.random() },
          { zuowei: "9排02座", name: 10, states: false, id: Math.random() },
          { zuowei: "9排03座", name: 11, states: false, id: Math.random() },
          { zuowei: "9排04座", name: 12, states: false, id: Math.random() }
        ],
        [
          { zuowei: "7排05座", name: 1, states: false, id: Math.random() },
          { zuowei: "7排06座", name: 2, states: false, id: Math.random() },
          { zuowei: "7排07座", name: 3, states: false, id: Math.random() },
          { zuowei: "7排08座", name: 4, states: false, id: Math.random() },
          { zuowei: "8排05座", name: 5, states: false, id: Math.random() },
          { zuowei: "8排06座", name: 6, states: false, id: Math.random() },
          { zuowei: "8排07座", name: 7, states: false, id: Math.random() },
          { zuowei: "8排08座", name: 8, states: false, id: Math.random() },
          { zuowei: "9排05座", name: 9, states: false, id: Math.random() },
          { zuowei: "9排06座", name: 10, states: false, id: Math.random() },
          { zuowei: "9排07座", name: 11, states: false, id: Math.random() },
          { zuowei: "9排08座", name: 12, states: false, id: Math.random() }
        ],
        [
          { zuowei: "7排09座", name: 1, states: false, id: Math.random() },
          { zuowei: "7排10座", name: 2, states: false, id: Math.random() },
          { zuowei: "7排11座", name: 3, states: false, id: Math.random() },
          { zuowei: "7排12座", name: 4, states: false, id: Math.random() },
          { zuowei: "8排09座", name: 5, states: false, id: Math.random() },
          { zuowei: "8排10座", name: 6, states: false, id: Math.random() },
          { zuowei: "8排11座", name: 7, states: false, id: Math.random() },
          { zuowei: "8排12座", name: 8, states: false, id: Math.random() },
          { zuowei: "9排09座", name: 9, states: false, id: Math.random() },
          { zuowei: "9排10座", name: 10, states: false, id: Math.random() },
          { zuowei: "9排11座", name: 11, states: false, id: Math.random() },
          { zuowei: "9排12座", name: 12, states: false, id: Math.random() }
        ]
      ],
      notwo: [3, 7, 11],
      nothree: [2, 3, 6, 7, 10, 11],
      isfour: [0, 4, 8],
      pai: "",
      wei: ""
    };
  },
  computed: {
    ...mapState({
      //导航标题
      infos: function(state) {
        return state.arr.find(ele => ele.id == this.$route.params.id);
      }
    }),
    ...mapState({
      //电影院
      lists: function(state) {
        return state.list.find(ele => ele.id == this.$route.params.id);
      }
    })
  },
  created() {},
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
    ok() {
      this.$router.push({
        name: "cinemaOrder"
      });
      let arr = [];
      for (let index = 0; index < this.list.length; index++) {
        this.list[index].forEach(ele => {
          if (ele.states == true) {
            arr.push(ele.zuowei);
          }
        });
      }
      let cot = arr.length * 30.9;
      console.log(arr, cot);
      this.$store.state.bill = cot;
      this.$store.state.obj = arr;
      this.show = false;
    },
    // filters:{
    //   prices(price){
    //     return price.toFixed(2)
    //   }
    // },
    cut(i, j) {
      this.list[i][j].states = !this.list[i][j].states;
      this.show = false;
    },
    one() {
      //判断第4组和第7组优秀组是否满座
      let v = this.list[4].findIndex(ele => ele.states == false);
      let c = this.list[7].findIndex(ele => ele.states == false);
      //不满的话找出不满的+1
      if (v !== -1) {
        this.list[4][v].states = true;
      } else if (c !== -1) {
        this.list[7][c].states = true;
      } else if (v == -1 && c == -1) {
        // 全满从头+1
        let d = 0,
          cot = 0;
        for (let i = 0; i < this.list.length; i++) {
          cot = this.list[i].findIndex(ele => ele.states == false);
          console.log(i, cot);
          if (cot !== -1) {
            d = i;
            break;
          }
        }
        this.list[d][cot].states = true;
      }
      this.show = false;
    },
    two() {
      //找4、7两连坐 、没有则按顺序找两连
      // 两连 座位号不能为3、7、11 的拐角号
      let lengthis = this.list.length - 1;
      let v = [];
      this.list[4].forEach(ele => {
        if (ele.states == false) {
          v.push(ele.name);
        }
      });
      let c = [];
      this.list[7].filter((ele, index) => {
        if (ele.states == false) {
          c.push(ele.name);
        }
      });
      let d = 0,
        a = 0;
      for (let i = 0; i < v.length - 1; i++) {
        console.log(v[i] - 1, i, this.notwo);

        if (this.notwo.includes(v[i] - 1)) {
        } else {
          if (v[i] + 1 == v[i + 1]) {
            d = v[i + 1];
            a = v[i];
            break;
          }
        }
      }

      if (a == 0 && d == 0) {
        for (let i = 0; i < c.length - 1; i++) {
          if (this.notwo.includes(c[i] - 1)) {
          } else {
            if (c[i] + 1 == c[i + 1]) {
              d = c[i + 1];
              a = c[i];
              break;
            }
          }
        }
        if (a == 0 && d == 0) {
          let cot = 0;
          for (let i = lengthis; i >= 0; i--) {
            if (i == 4 || i == 7) {
              i--;
            }
            for (let j = 0; j < this.list[i].length; j++) {
              if (!this.notwo.includes(j)) {
                if (
                  this.list[i][j].states !== true &&
                  this.list[i][j + 1].states !== true
                ) {
                  if (this.list[i][j].name + 1 == this.list[i][j + 1].name) {
                    this.list[i][j + 1].states = true;
                    this.list[i][j].states = true;
                    return;
                  }
                }
              }
            }
          }
        } else {
          this.list[7][a - 1].states = true;
          this.list[7][d - 1].states = true;
        }
      } else {
        this.list[4][a - 1].states = true;
        this.list[4][d - 1].states = true;
      }
      this.show = false;
    },
    three() {
      //找4、7两连坐 、没有则按顺序找三连
      // 三连 座位号不能为2, 3, 6, 7, 10, 11的拐角号
      // if (this.notwo.includes(v[i] - 1))
      let lengthis = this.list.length - 1;
      let v = [];
      this.list[4].forEach(ele => {
        if (ele.states == false) {
          v.push(ele.name);
        }
      });
      let c = [];
      this.list[7].filter((ele, index) => {
        if (ele.states == false) {
          c.push(ele.name);
        }
      });
      let d = 0,
        a = 0,
        q = 0;
      for (let i = 0; i < v.length - 1; i++) {
        if (v[i] + 1 == v[i + 1] && c[i] + 2 == c[i + 2]) {
          if (this.nothree.includes(v[i] - 1)) {
          } else {
            d = v[i + 1];
            a = v[i];
            q = v[i + 2];
            break;
          }
        }
      }

      if (a == 0 && d == 0 && q == 0) {
        for (let i = 0; i < c.length - 1; i++) {
          if (c[i] + 1 == c[i + 1] && c[i] + 2 == c[i + 2]) {
            if (this.nothree.includes(c[i] - 1)) {
            } else {
              d = c[i + 1];
              a = c[i];
              q = c[i + 2];
              break;
            }
          }
        }
        if (a == 0 && d == 0 && q == 0) {
          for (let i = lengthis; i >= 0; i--) {
            if (i == 4 || i == 7) {
              i--;
            }
            for (let j = 0; j < this.list[i].length; j++) {
              if (this.nothree.includes(j)) {
              } else {
                if (
                  this.list[i][j].states !== true &&
                  this.list[i][j + 1].states !== true &&
                  this.list[i][j + 2].states !== true
                ) {
                  if (
                    this.list[i][j].name + 1 == this.list[i][j + 1].name &&
                    this.list[i][j].name + 2 == this.list[i][j + 2].name
                  ) {
                    this.list[i][j + 2].states = true;
                    this.list[i][j + 1].states = true;
                    this.list[i][j].states = true;
                    return;
                  }
                }
              }
            }
          }
          // this.list[cot][a - 1].states = true
          // this.list[cot][d - 1].states = true
        } else {
          this.list[7][a - 1].states = true;
          this.list[7][d - 1].states = true;
          this.list[7][q - 1].states = true;
        }
      } else {
        this.list[4][a - 1].states = true;
        this.list[4][d - 1].states = true;
        this.list[4][q - 1].states = true;
      }
      this.show = false;
    },
    four() {
      console.log(111);

      let lengthis = this.list.length - 1;
      let v = [];
      this.list[4].forEach(ele => {
        if (ele.states == false) {
          v.push(ele.name);
        }
      });
      let c = [];
      this.list[7].filter((ele, index) => {
        if (ele.states == false) {
          c.push(ele.name);
        }
      });
      let d = 0,
        a = 0,
        q = 0,
        w = 0;
      for (let i = 0; i < v.length - 1; i++) {
        //找4、7两连坐 、没有则按顺序找四连
        // 四连座位号只能是0、4、8
        if (this.isfour.includes(v[i] - 1)) {
          if (
            v[i] + 1 == v[i + 1] &&
            c[i] + 2 == c[i + 2] &&
            v[i] + 3 == v[i + 3]
          ) {
            d = v[i + 1];
            a = v[i];
            q = v[i + 2];
            w = v[i + 3];
            break;
          }
        }
      }

      if (a == 0 && d == 0 && q == 0) {
        for (let i = 0; i < c.length - 1; i++) {
          if (this.isfour.includes(c[i] - 1)) {
            if (
              c[i] + 1 == c[i + 1] &&
              c[i] + 2 == c[i + 2] &&
              c[i] + 3 == c[i + 3]
            ) {
              d = c[i + 1];
              a = c[i];
              q = c[i + 2];
              w = c[i + 3];
              break;
            }
          }
        }
        if (a == 0 && d == 0 && q == 0) {
          for (let i = lengthis; i >= 0; i--) {
            if (i == 4 || i == 7) {
              i--;
            }
            for (let j = 0; j < this.list[i].length; j++) {
              if (this.isfour.includes(j)) {
                if (
                  this.list[i][j].states !== true &&
                  this.list[i][j + 1].states !== true &&
                  this.list[i][j + 2].states !== true &&
                  this.list[i][j + 3].states !== true
                ) {
                  if (
                    this.list[i][j].name + 1 == this.list[i][j + 1].name &&
                    this.list[i][j].name + 2 == this.list[i][j + 2].name &&
                    this.list[i][j].name + 3 == this.list[i][j + 3].name
                  ) {
                    this.list[i][j + 2].states = true;
                    this.list[i][j + 1].states = true;
                    this.list[i][j].states = true;
                    this.list[i][j + 3].states = true;
                    return;
                  }
                }
              }
            }
          }
        } else {
          this.list[7][a - 1].states = true;
          this.list[7][d - 1].states = true;
          this.list[7][q - 1].states = true;
          this.list[7][w - 1].states = true;
        }
      } else {
        this.list[4][a - 1].states = true;
        this.list[4][d - 1].states = true;
        this.list[4][q - 1].states = true;
        this.list[4][w - 1].states = true;
      }
      this.show = false;
    }
  }
};
</script>
<style lang="scss">
</style>
<style scoped lang="scss">

body .van-nav-bar {
  background-color: transparent !important;
}
body [class*="van-hairline"]::after {
  border: 0;
}
body .leftrow.van-nav-bar__left {
  color: #ffffff !important;
}

body .van-nav-bar .van-icon,
.van-icon.van-icon-arrow-left.van-nav-bar__arrow {
  color: #ffffff !important;
}


body .banner {

  height: 205px;
  background: url(~@/assets/images/seat/seat.png) no-repeat center;
  background-size: 375px 205px;
}
.all {
  // transform: translateY(-182px);

  // margin-top: -186px;
  // overflow: hidden;
  height: 100%;
}
.all-nofoot{
   transform: translateY(-10px);
     position: absolute;
  top: 30px;
  left: 0;
}
body .share {
  width: 20px;
  height: 20px;
  transform: translate(160px, 14px);
  //   position:fixed;
}
body .we {
  font-size: 16px;
  color: #ffffff;
  width: 90%;
  text-align: left;
  margin: 0 auto;
  margin-top: 40px;
}
body .time {
  width: 99px;
  height: 23px;
  background: rgba(51, 54, 61, 1);
  border-radius: 5px;
  opacity: 0.7293999999999999;

  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 23px;
}
.type {
  width: 61px;
  height: 23px;
  border-radius: 5px;
  opacity: 0.7293999999999999;
  border: 1px solid rgba(51, 54, 61, 1);
  line-height: 23px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin-left: 10px;
}
.three {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 90%;
  margin: 10px auto;
}
.color {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
  p {
    margin-left: -60px;
    font-size: 14px;
    color: #dfdfdf;
  }
  .optional {
    width: 26px;
    height: 26px;
    background: rgba(144, 146, 148, 1);
    box-shadow: 0px 2px 4px 0px rgba(76, 41, 49, 0.54);
    border-radius: 6px;
  }
  .no {
    width: 26px;
    height: 26px;
    background: rgba(249, 195, 74, 1);
    box-shadow: 0px 2px 4px 0px rgba(76, 41, 49, 0.54);
    border-radius: 6px;
  }
  .selected {
    width: 26px;
    height: 26px;
    background: rgba(101, 72, 169, 1);
    box-shadow: 0px 2px 4px 0px rgba(76, 41, 49, 0.54);
    border-radius: 6px;
  }
}
.screen {
  position: relative;
  margin: -1px auto 0;
  font-size: 12px;
  border-radius: 8px;
  width: 135px;
  border-top: 20px solid #33363d;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  top: 20px;
  color: #dfdfdf;
  p {
    transform: translateY(-15px);
  }
}

// 座位
.seat {
  display: flex;
  width: 100%;
  height: 312px;
  position: relative;
  margin-top: 20px;
  //   background-color: teal;
  .seat-side {
    width: 20px;
    height: 312px;
    background-color: #33363d;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35);
    border-radius: 12px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    margin-left: 10px;
    .num {
      color: #dfdfdf;
      font-weight: bold;
      width: 20px;
      height: 25px;
      line-height: 25px;
      flex-direction: row;
    }
    .num:nth-child(3) {
      margin-bottom: 15px;
    }
    .num:nth-child(6) {
      margin-bottom: 15px;
    }
    .num:nth-child(9) {
      margin-bottom: 0;
    }
  }
  // 选座为
  .stark {
    // height: 500px;
    // width: 1000px;
    // margin: 50px auto;
    width: 100%;
    height: 312px;
    display: flex;
    list-style: none;
    flex-flow: wrap row;
    transform: translateY(25px);
    width: 85%;
    margin: 0 auto;
  }
  li {
    width: 100px;
    height: 70px;
    display: flex;
    list-style: none;
    flex-flow: wrap row;
    // margin-top: 5px;
    span {
      width: 20px;
      height: 20px;
      background: rgba(144, 146, 148, 1);
      border-radius: 3px;
      margin-left: 5px;
      margin-top: 5px;
      background: rgba(144, 146, 148, 1);
      border-radius: 3px;
    }
  }
  .stark li:nth-child(6) {
    transform: translateY(-15px);
  }
  .stark li:nth-child(5) {
    transform: translateY(-15px);
  }
  .stark li:nth-child(4) {
    transform: translateY(-15px);
  }
  .stark li:nth-child(7) {
    transform: translateY(-28px);
  }
  .stark li:nth-child(8) {
    transform: translateY(-28px);
  }
  .stark li:nth-child(9) {
    transform: translateY(-28px);
  }
  .readybox1 {
    background-color: #f9c34a !important;
  }
  .black {
    background-color: #22262d !important;
  }
  .active {
    background-color: rgba(101, 72, 169, 1);
  }
}
// 底部
.foot {
  // overflow: hidden;
  
  width: 100%;
  height: 156px;
  background-color: #33363d;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
 position: fixed;
 bottom: 0;
 left: 0;
  .foot-block {
    position: relative;
    z-index: 99;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 16px;
      font-weight: 400;
      color: #dfdfdf;
    }
    span {
      display: inline-block;
      width: 52px;
      height: 23px;
      font-size: 16px;
      font-weight: 400;
      color: #dfdfdf;
      border: 1px solid rgba(151, 151, 151, 1);
      line-height: 25px;
    }
  }
  .foot-btn {
    width: 335px;
    height: 40px;
    background: linear-gradient(
      150deg,
      rgba(242, 91, 134, 1) 0%,
      rgba(241, 172, 94, 1) 100%
    );
    box-shadow: 0px 0px 4px 1px rgba(242, 109, 125, 0.18);
    border-radius: 6px;
    // opacity: 0.4391;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    line-height: 40px;
    transform: translateY(20px);
  }
}
</style>
